<template>
	<view class="login-content">
		<u-popup class="login-popup" :show="showFlag" mode="bottom" :round="10" @close="popupClose">
			<view class="login-view">
				<u-button type="success" text="微信授权登录" @click="loginFn"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showForm" mode="bottom" :round="10" @close="formClose">
			<view class="login-form">
				<u--form labelPosition="left" :model="loginData" :rules="loginRules" ref="loginData">
					<u-form-item label="账号:" prop="loginData.userAccount">
						<u--input v-model="loginData.userAccount" placeholder="请输入账号" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="密码:" prop="loginData.password">
						<u--input v-model="loginData.password" placeholder="请输入密码" border="surround"></u--input>
					</u-form-item>
				</u--form>
				<view class="button-bottom">
					<view class="login-button">
						<u-button type="success" text="登录" @click="loginButtonClick"></u-button>
					</view>
					<u-button type="primary" text="取消" @click="cancelButtonClick"></u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Toast from '../wxcomponents/@vant/weapp/toast/toast';
	import {
		userLogin,
		getUserInfo,
		userWxlogin
	} from '@/config/api.js'
	import {
		removeToken,
		getToken
	} from '@/utils/auth.js'
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: {},
		data() {
			return {
				showFlag: false,
				showForm: false,
				loginData: {
					userAccount: '',
					password: '',
					openid: ''
				},
				loginRules: {}
			}
		},
		computed: {},
		methods: {
			...mapActions(['login', 'setInfo', 'logout']),
			loginFn() {
				let that = this
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							wx.request({
								url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx124f07619b319a90&secret=a0973db6c631424d30c65b4cd352c000&js_code=${res.code}&grant_type=authorization_code`,
								method: 'GET',
								async success(res) {
									const loginRes = await userLogin({
										userAccount: 'suneo',
										password: '123456',
										openid: res.data.openid
									})
									if (loginRes.data.firstLogin) {
										that.showToast()
										that.showForm = true
										that.loginData.openid = res.data.openid
									} else {
										that.login(loginRes.data.token)
										const infoRes = await getUserInfo()
										if (infoRes.hasOk) {
											that.$refs.uToast.show({
												...{
													type: 'success',
													title: '',
													message: "登录成功",
												}
											})
											that.setInfo(infoRes.data)
											that.$emit('refresh')
											that.showFlag = false
											that.showForm = false
										}
									}
								}
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			popupClose() {
				this.showFlag = false
			},
			formClose() {
				this.showForm = false
			},
			async loginButtonClick() {
				let that = this
				const res = await userWxlogin(this.loginData)
				if (res.hasOk) {
					that.login(res.data.token)
					const infoRes = await getUserInfo()
					if (infoRes.hasOk) {
						that.$refs.uToast.show({
							...{
								type: 'success',
								title: '',
								message: "登录成功",
							}
						})
						that.setInfo(infoRes.data)
					}
					that.$emit('refresh')
					that.showFlag = false
					that.showForm = false
					that.$refs.uToast.show({
						...{
							type: 'success',
							title: '',
							message: "登录成功",
						}
					})
				} else {
					Toast.fail('登录失败');
				}
			},
			cancelButtonClick() {
				this.showFlag = false
				this.showForm = false
			},
			showToast() {
				this.$refs.uToast.show({
					...{
						type: 'warning',
						title: '',
						message: "首次登录，绑定系统账号",
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-view {
		padding: 40px 20px;
	}

	.login-form {
		padding: 40px 20px;
		padding-bottom: 20px;

		.button-bottom {
			margin-top: 10px;

			.login-button {
				margin-bottom: 10px;
			}
		}
	}
</style>